<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css">
	</head>
	<body>
		<!-- 学习计划表 -->
		<div id="app">
			<!-- 学习计划添加 -->
			<div class="card">
				<!-- 标题区域 -->
				<div class="card-header">学习计划表</div>
				<!-- 提交区域 -->
				<div class="card-body">
					<form @submit.prevent="add">
						<div class="row g-4">
							<!-- 学习科目 -->
							<div class="col-auto">
								<div class="input-group mb-3">
									<span class="input-group-text" id="basic-addon1">学习科目</span>
									<input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
								</div>
							</div>

							<!-- 学习任务 -->
							<div class="col-auto">
								<div class="input-group mb-3">
									<span class="input-group-text" id="basic-addon1">学习内容</span>
									<textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
										:style="{ height: '32px' }"></textarea>
								</div>
							</div>

							<!-- 学习地点 -->
							<div class="col-auto">
								<div class="input-group mb-3">
									<span class="input-group-text" id="basic-addon1">学习地点</span>
									<select class="form-select form-select-sm" v-model="selectedOption">
										<option v-for="(item,i) in options" :value="item.place" :key="i">{{ item.place }}
										</option>
									</select>
								</div>
							</div>
							<!-- 添加按钮 -->
							<div class="col-auto">
								<button type="submit" class="btn btn-primary">添加</button>
							</div>
						</div>
					</form>
				</div>
			</div>


			<table class="table table-striped table-hover table-bordered">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学习科目</th>
						<th scope="col">学习内容</th>
						<th scope="col">学习地点</th>
						<th scope="col">完成状态</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 学习计划列表渲染 -->
					<tr v-for="(item,i) in list" :key="i">
						<td>{{ item.id }}</td>
						<td>{{ item.subject }}</td>
						<td>{{ item.content }}</td>
						<td>{{ item.place }}</td>
						<!-- 是否已完成 -->
						<td>
							<div class="form-check form-switch">
								<input class="form-check-input" type="checkbox" role="switch" v-model="item.status"
									:id="'cb' + item.id" />
								<label class="form-check-label" :for="'cb' + item.id">{{item.status ? '已完成' : '未完成' }}</label>
							</div>
						</td>
						<td>
							<a href="javascript:;" @click="remove(item)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						subject: '', //学习科目 
						content: '', //学习内容 
						// 3 let nextId = ref('') 
						selectedOption: '自习室', //学习地点 

						// 供选择的学习地方
						options: [
							{ placeCode: 0, place: '自习室' },
							{ placeCode: 1, place: '图书馆' },
							{ placeCode: 2, place: '宿舍' },
						],

						// 学习计划列表数据
						list: [{
								id: '1',
								subject: 'Vue.js前端实战开发',
								content: '学习指令，例如v-if、v-for、v-model等',
								place: '自习室',
								status: false,
							},
							{
								id: '2',
								subject: 'SpringBoot实战开发',
								content: '过滤器、拦截器等',
								place: '机房',
								status: false,
							},
							{
								id: '3',
								subject: 'SpringBoot实战开发3333',
								content: '过滤器、拦截器等3333',
								place: '机房',
								status: false,
							},
						]
					}
				},
				methods: {
					remove(item) {
						if (item.status) {
							this.list = this.list.filter(one => one.id !== item.id)
						} else {
							alert('请完成该学习计划后再进行删除操作！')
						}
					},

					// 添加方法
					add() {
						// 学习科目不能为空
						if (this.subject === '') {
							alert('学习科目为必填项！')
							return
						}

						// 生成学习计划记录的id值,数组中最大id值+1
						let nextId = Math.max(...this.list.map(item => item.id)) + 1
						// 学习计划表添加记录
						this.list.push({
							id: nextId,
							subject: this.subject,
							content: this.content,
							place: this.selectedOption,
							status: false,
						})
						// 变量重置初始值
						this.subject = ''
						this.content = ''
						this.selectedOption = '自习室'
					},
				},
			}).mount(" #app");
		</script>
	</body>
</html>